<template>
  <div class="uploadImg">
    <div class="img-wrapper">
      <i :class="value ? 'el-icon-plus icon has-img': 'el-icon-plus icon'" @click="uploadHandle"></i>
      <img :src="value" alt="" class="imgNode">
      <el-progress type="circle" :percentage="percentage" class="progress" v-show="percentShow"></el-progress>
      <div class="shade"></div>
      <input type="file" ref="inputfile" @change="fileChangeHandle" style="display: none;">
    </div>
  </div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import api from '@/api/apiPath'
  import Util from '@/common/utils'
  export default {
    name: "upload-img",
    data () {
      return {
        percentage: 0,
        percentShow: false,
        token: '',
        qiniuUrl: '',
        imgUrl: ''
      }
    },
    props: ['value'],
    created () {
      this.axios.post(api.UPLOADTOKEN, {}).then(res => {
        this.token = res.data.data.imgToken
        this.qiniuUrl = res.data.data.qiniuUrl
      })
    },
    watch: {
      value (val) {
        this.imgUrl = val
      }
    },
    methods: {
      uploadHandle () {
        const node = this.$refs.inputfile
        node.click()
      },
      fileChangeHandle () {
        const file = this.$refs.inputfile.files[0]
        // 判断文件类型
        const upType = ['jpg', 'png']
        const fileName = file.name
        const postfix = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length)
        if (upType.indexOf(postfix) === -1) {
          alert('只支持png jpg格式的图片')
          return false
        }
        // 判断图片宽高
        // const fileReader = new FileReader()
        // fileReader.readAsDataURL(file)
        // const vueThis = this
        // fileReader.onloadend = function () {
        //   const img = new Image()
        //   img.src = this.result
        //   img.onload = function () { // 异步的
        //     if (this.width !== 375 && this.height !== 190) {
        //       alert('请上传分辨率为 375 * 190 的图片')
        //     } else {
        //       vueThis.uploadQiniu(file)
        //     }
        //   }
        // }
        this.uploadQiniu(file)
      },
      // 用七牛上传
      uploadQiniu (file) {
        const fileName = file.name
        const postfix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)
        const name = Util.getTimeString2(new Date().getTime())
        const token = this.token
        var putExtra = {
          fname: fileName,
          params: {},
          mimeType: null
        }
        var config = {
          useCdnDomain: true
        }
        var observable = qiniu.upload(file, name + postfix, token, putExtra, config)
        const vueThis = this
        this.percentShow = true
        this.percentage = 10
        observable.subscribe(function (res) {
          console.log('图片上传进度：', res)
          vueThis.percentage = res.total.percent
        }, function (error) {
          console.error('图片上传失败：', error)
        }, function (res) {
          vueThis.percentShow = false
          vueThis.imgUrl = vueThis.qiniuUrl + res.key
          vueThis.$emit('uploadSuccess', vueThis.imgUrl)
        })
      }
    }
  }
</script>

<style lang="stylus">
  .uploadImg{
    .img-wrapper{
      position: relative;
      width: 148px;
      height: 148px;
      background-color: #fbfdff;
      border: 1px dashed #c0ccda;
      border-radius: 6px;
      box-sizing: border-box;
      cursor: pointer;
      overflow: hidden;
      .has-img{
        opacity: 0;
      }
      &:hover{
        border-color: #409eff;
        color: #409eff;
        .shade{
          display: block;
        }
        .icon{
          opacity: 1;
          color: #fff;
          z-index: 9;
        }
      }
      .shade{
        position: absolute;
        display: none;
        background: rgba(0,0,0,0.5);
        left: 0;
        top: 0;
        right:0;
        bottom: 0;
      }
      .icon{
        font-size: 26px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .imgNode{
        width: 148px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      .progress{
        margin-top: 10px;
        margin-left: 10px;
      }
    }
  }
</style>
